<template>
    <div class="">

        <h1>微信网页授权</h1>
        <p>code: {{code}}</p>
        <img :src="userInfo.headimgurl" alt="">
        <p>{{userInfo.nickname}}</p>
    </div>
</template>

<script>

import axios from 'axios'
// 项目的appId
var appid = 'wxb10344d6be4e46ee';
// 授权后 需要跳回的页面 一般是当前页面
var redirectUrl = 'http://bufantec.natapp1.cc/wx';
var userInfo_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
// 接口服务器地址: 
const serveHost = 'http://www.bufantec.com';
export default {
    components: {

    },
    data() {
        return {
            code: '',
            userInfo: {}
        };
    },
    computed: {

    },
    created() {
        // 1. 引导用户进入授权页面同意授权，获取code
        // 1.1 一旦用户统一授权,那么微信会直接重定向到url并且追加code
        // 1.2 所以需要手动截取code,而且要终止死循环
        // http://bufantec.natapp1.cc/wx?code=001Xpb0w3faR5V2tFW3w3ec9kI0Xpb0u&state=STATE
        // a. 假设url携带了code,先截取code
        this.code = this.$route.query.code;
        // 如果尽量没有code,那么引导用户获取code
        if(this.code){
            console.log('获取code成功!');
            // 2. 给后台发送请求,并携带code,后台可以通过code和appsecret去微信服务器换取access_token
            //     2.1 拉取用户信息(需scope为 snsapi_userinfo)这个操作依赖于access_token和openid 这个后台处理了
            //     2.2  后台获取用户信息api:  /wx/user/getUserInfo 参数: appid  code
            var url = `${serveHost}/wx/user/getUserInfo?appid=${appid}&code=${this.code}`;
            axios.get(url)
                .then(res=>{
                    console.log(res);
                    this.userInfo = res.data.data;
                })
        }else{
            window.location.href = userInfo_url;
        }
       
    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style scoped lang="scss">

</style>
